<template>
  <div style="width: 1200px;margin: 0 auto">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card v-for="c in comment">
          <h1 style="color: black;text-align: center">
            {{c.title}}
          </h1>
          <p style="text-align: center;font-size: 15px;color: #666">
            <el-avatar :src=c.avatar :size="25"></el-avatar>
            作者:{{c.author}} | 发布时间:{{c.releaseTime}} | 阅读次数:{{c.numberViews}}
          </p>
          <hr>
          <el-card>
            <b style="color: #0aa1ed">提示:</b>
            这篇剧评可能有剧透
          </el-card>
          <p style="height: 500px">{{c.content}}</p>
          <div style="text-align: center">
            <el-button>
              <el-icon style="margin-right: 3px"><ArrowUpBold /></el-icon>
              有用</el-button>
            <el-button >
              <el-icon style="margin-right: 3px"><ArrowDownBold /></el-icon>
              没用</el-button>
          </div>
        </el-card>
        <!--     评论相关开始   -->
        <el-card style="margin-top: 20px">
          <p>发一条友善的评论</p>
          <hr>
          <el-row>
            <el-col :span="22">
              <el-input placeholder="请输入评论的内容..."></el-input>
            </el-col>
            <el-col :span="2">
              <el-button>发布</el-button>
            </el-col>
          </el-row>
          <!--    评论列表-->
          <el-row style="margin: 20px;" v-for="c in userComment">
            <el-col :span="2">
              <el-avatar :src= c.avatar></el-avatar>
            </el-col>
            <el-col :span="22">
              <p style="color: orange;font-weight: bold;margin: 0">{{c.username}}:</p>
              <p style="margin: 5px 0">{{c.content}}</p>
              <p style="color: #666;font-size: 12px">{{c.time}}</p>
            </el-col>
          </el-row>
        </el-card>
        <!--    评论相关结束    -->
      </el-col>
      <el-col :span="8">
        <!--影评简介栏-->
        <el-card style="margin: 10px 0" v-for="m in movie" >
          <a href="" style="text-decoration: none"><p>{{m.title}}</p></a>
          <hr>
          <a href=""><img :src=m.imgUrl style="width: 100%;height: 100%"></a>
          <ul class="info-list" style="margin: 0;font: 13px Helvetica,Arial,sans-serif;list-style: none">
            <li class="info-item">
              <span class="info-item-key">类型:</span>
              <span class="info-item-val">{{m.category}}</span>
            </li>
            <li class="info-item">
              <span class="info-item-key">导演:</span>
              <span class="info-item-val">{{m.director}}</span>
            </li>
            <li class="info-item">
              <span class="info-item-key">主演:</span>
              <span class="info-item-val">{{m.actor}}</span>
            </li>
            <li class="info-item">
              <span class="info-item-key">地区:</span>
              <span class="info-item-val">{{m.area}}</span>
            </li>
            <li class="info-item">
              <span class="info-item-key">上映:</span>
              <span class="info-item-val">{{m.releaseTime}}</span>
            </li>
          </ul>
        </el-card>
        <!--作者其他文章结束-->
      </el-col>
    </el-row>
  </div>
</template>


<script  setup>
import { reactive, toRefs,ref } from 'vue'

const comment = ref([
  {
    "title":"塞琳·斯玛娜：戈达尔《电影史》全部元素整理考据表",
    "avatar":"/imgs/logo.png",
    "author":"传奇哥",
    "releaseTime":"2023/8/9 15:40:50",
    "numberViews":"356",
    "content":"戈达尔研究专家塞琳·斯玛娜（Celine Scemana）耗费大量心血，整理并考据了《电影史》中的全部元素，将其汇总为八张表格。这八张表格理应成为所有戈达尔研究者案头必备的参考文献，具有无可替代的重要价值。\n" +
        "\n" +
        "            令人痛心的是，斯玛娜发表这份研究的原始网站已经不可访问。但万幸的是，（伟大的！）Internet Wayback Machine存档了原始网站的数据，使得这份研究不至于彻底消失在茫茫的以太虚空之中。\n" +
        "\n" +
        "            《电影史》各分集所对应的整理表已在各条目的影评区发布，现汇总如下："
  }
])


const userComment = ref([
  {
    "avatar":"/imgs/logo.png",
    "username":"测试用户",
    "content":"说的对",
    "time":"2023/10/12 10:50:00"
  },
  {
    "avatar":"/imgs/logo.png",
    "username":"测试用户",
    "content":"说的对",
    "time":"2023/10/12 10:50:00"
  },
  {
    "avatar":"/imgs/logo.png",
    "username":"测试用户",
    "content":"说的对",
    "time":"2023/10/12 10:50:00"
  },
  {
    "avatar":"/imgs/logo.png",
    "username":"测试用户",
    "content":"说的对",
    "time":"2023/10/12 10:50:00"
  },

])

const movie = ref([
  {
    "title":"电影史",
    "imgUrl":"/imgs/img.png",
    "category":"纪录片",
    "director":"让-吕克·戈达尔",
    "actor":"让-吕克·戈达尔 / 阿兰·居尼 / 萨宾·阿泽玛",
    "area":"法国",
    "releaseTime":"1989-05-07(法国)"
  }
])


const state = reactive({
  sizeList: ['small', '', 'large']
})

const {sizeList } = toRefs(state)
</script>

<style scoped>

.info-item-key{
  color: #999;
  line-height: 1.62;
}
.info-item-val{
  line-height: 1.62;
}
</style>